<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元字符</title>
    <style>
        .红色标注{
            color: red;
        }
    </style>
</head>
<body>
<h3>普通字符:</h3>
<p>
    大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。 <br>
    也就是说普通字符只能够匹配字符串中与它们相同的字符。
</p>

<h3>元字符(特殊字符）</h3>
<p>
    是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。 <br>
    比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm….. <br>
    但是换成元字符写法： [a-z]
</p>

<h3>参考文档：</h3>
<p>
    MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions <br>
    正则测试工具: http://tool.oschina.net/regex
</p>
<hr>

<h3>元字符分类</h3>
<p>
    为了方便记忆和学习，我们对众多的元字符进行了分类 <br>
    1. 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾） <br>
    2. 量词 （表示重复次数） <br>
    3. 字符类 （比如 \d 表示 0~9）
</p>
<hr>

<h4>1. 边界符</h4>
<p>
    正则表达式中的边界符（位置符）用来提示 字符所处的位置，主要有两个字符
</p>
<pre style="font-size: 20px;">
    边界符             说明
    ^           匹配行首的文本(必须以谁开始)
    $           匹配行尾的文本(必须以谁结束)
</pre>
<p class="红色标注">
    同时 ^ 和 $ 在一起，表示必须是 精确匹配 <br>
    精确匹配 是只能出现指定的字符
</p>
<hr>

<h4>2. 量词</h4>
<p>量词用来 设定 某个模式出现的次数</p>
<pre style="font-size: 20px;">
    量词             说明
    *         重复零次或更多次
    +         重复一次或更多次
    ？        重复零次或一次
    {n}       重复n次
    {n,}      重复n次或更多次
    {n,m}     重复n到m次
</pre>
<p class="红色标注">注意：逗号左右两侧千万不</p>
<hr>


<script>
    // 边界符 演示
    console.log('------- 边界符 演示 ---------')

    // 正则规则.test('被检查的字符串')  ^ 必须以谁开始  $ 必须以谁结束
    console.log('1-'+ /^哈/.test('哈哈')) // true，      以‘哈’开始
    console.log('2-'+ /^哈/.test('二哈')) // false，     不是以‘哈’开始
    console.log('3-'+ /^哈$/.test('哈')) // true  只有这种情况为true 否则全是false （精确匹配）
    console.log('4-'+ /^哈$/.test('哈哈')) // false， 这里要求是精确匹配 '哈'， 所以'哈哈'都不算
    console.log('5-'+ /^哈$/.test('二哈')) // false

    console.log('------------------')
    console.log('1-'+ /^二哈$/.test('二哈二哈')) // false,   要求是精确匹配
    console.log('2-'+ /^二哈$/.test('哈二哈')) // false，不是以 '二哈' 字符开头
    console.log('3-'+ /^二哈$/.test('二哈')) // true



    // 前面加 '1-'+ 之类的, 是为了在看控制台信息 方便区分, 和演示没有关系
    // 同时 ^ 和 $ 在一起，表示必须是 精确匹配
    // 量词 演示
    console.log('------- 量词 演示 ---------')
    //  量词 * ,类似 >=0 次
    console.log('----量词 * 演示------------')
    console.log('1-'+ /^哈$/.test('哈')) // true, 先看精确匹配
    console.log('2-'+ /^哈*$/.test('')) // true, 加了量词 *, 允许0个
    console.log('3-'+ /^哈*$/.test('哈')) // true
    console.log('4-'+ /^哈*$/.test('哈哈')) // true, 加了量词 *, 0到多个

    console.log('5-'+ /^哈*$/.test('二哈很傻')) //  false, 不是以 '哈' 开头 (精确匹配)
    console.log('6-'+ /^哈*$/.test('哈很傻')) //  false, 不是以 '哈' 结尾 (精确匹配)
    console.log('7-'+ /^哈*$/.test('哈很哈')) // false, 这里精确匹配, 不能有其他字符

    //  量词 + ,类似 >=1 次
    console.log('---- 量词 + 演示 -----------')
    console.log('1-'+ /^哈$/.test('哈')) // true, 先看精确匹配
    console.log('2-'+ /^哈+$/.test('')) // false, 加量词 +, 要最少1次
    console.log('3-'+ /^哈+$/.test('哈')) // true
    console.log('4-'+ /^哈+$/.test('哈哈')) // true, 加量词 +, 要最少1次,多无限

    console.log('5-'+ /^哈+$/.test('二哈很傻')) //  false, 不是以 '哈' 开头 (精确匹配)
    console.log('6-'+ /^哈+$/.test('哈很傻')) //  false,  不是以 '哈' 结尾 (精确匹配)
    console.log('7-'+ /^哈+$/.test('哈很哈')) // false, 这里精确匹配, 不能有其他字符

    //  量词 ? ,类似  0 或 1
    console.log('--------量词 ? 演示----------')
    console.log('1-'+ /^哈?$/.test('')) // true, 加量词 ?, 可以0次
    console.log('2-'+ /^哈?$/.test('哈')) // true
    console.log('3-'+ /^哈?$/.test('哈哈')) // false, 加量词 ?, 0或1次 这里超了

    console.log('4-'+ /^哈?$/.test('二哈很傻')) //  false, 不是以 '哈' 开头 (精确匹配)
    console.log('5-'+ /^哈?$/.test('哈很傻')) //  false,  不是以 '哈' 结尾 (精确匹配)
    console.log('6-'+ /^哈?$/.test('哈很哈')) // false, 这里精确匹配, 不能有其他字符

    // 量词 {n} 写几，就必须出现几次
    console.log('--------量词 {n} 演示----------')
    console.log('1-'+ /^哈{4}$/.test('哈')) //  false
    console.log('2-'+ /^哈{4}$/.test('哈哈')) //  false
    console.log('3-'+ /^哈{4}$/.test('哈哈哈')) //  false

    console.log('4-'+ /^哈{4}$/.test('哈哈哈哈')) //  true, 规定是4次,其他非4次的都是 假
    console.log('5-'+ /^哈{4}$/.test('哈哈哈哈哈')) //  false
    console.log('6-'+ /^哈{4}$/.test('哈哈哈哈哈哈')) //  false

    // 量词 {n,} 类似,  >=n
    console.log('--------量词 {n,} 演示----------')
    console.log('1-'+ /^哈{4,}$/.test('哈')) //  false
    console.log('2-'+ /^哈{4,}$/.test('哈哈')) //  false
    console.log('3-'+ /^哈{4,}$/.test('哈哈哈')) //  false

    console.log('4-'+ /^哈{4,}$/.test('哈哈哈哈')) //  true, 大于等于4次,都是 真
    console.log('5-'+ /^哈{4,}$/.test('哈哈哈哈哈')) //  true
    console.log('6-'+ /^哈{4,}$/.test('哈哈哈哈哈哈')) //  true

    // 量词 {n,m}  逗号左右两侧千万不能有空格, 类似 >=n && <= m
    console.log('--------量词 {n,m} 演示----------')
    console.log('1-'+ /^哈{4,6}$/.test('哈')) //  false
    console.log('2-'+ /^哈{4,6}$/.test('哈哈')) //  false
    console.log('3-'+ /^哈{4,6}$/.test('哈哈哈')) //  false

    console.log('4-'+ /^哈{4,6}$/.test('哈哈哈哈')) //  true, 4到6之间的次数,都是 真
    console.log('5-'+ /^哈{4,6}$/.test('哈哈哈哈哈')) //  true, 4到6之间的次数,都是 真
    console.log('6-'+ /^哈{4,6}$/.test('哈哈哈哈哈哈')) //  true, 4到6之间的次数,都是 真

    console.log('7-'+ /^哈{4,6}$/.test('哈哈哈哈哈哈哈')) //  false, 超过6次, 假
</script>

</body>
</html>